<template>
    <div>
        <a-upload
            list-type="picture-card"
            :file-list="fileList"
            accept="image/png,image/gif,image/jpeg"
            :multiple="max==1?false:true"
            :disabled="disabled"
            :customRequest="downloadFilesCustomRequest"
            @preview="handlePreview"
            :remove="removeFile"
        >
            <div v-if="fileList.length < max">
                <a-icon :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">选择图片</div>
            </div>
        </a-upload>
        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="头像" style="width: 100%" :src="previewImage" />
        </a-modal>
    </div>
</template>
<script>
import {uploadDetectFile,updatePicture} from '@/api/upload'
import {checkFace,updateFace} from '@/api/staff/labour'

export default{
    name:'UploadFile',
    props:{
        max:{
            type:Number,
            default:1
        },
        url:{
            type:String,
            default:()=>[]
        },
        id:{
            type:String| Number,
            default:''
        },
        disabled:{
            type:Boolean,
            default:false
        },
        type:{
            type:String,
            default:'staff'
        }
    },
    data(){
        return{
            previewImage:'',
            previewVisible:false,
            loading:false,
            uploadCount:0,
            doneCount:0
        }
    },
    computed:{
        fileList(){
            let url = this.url;
            let fileList = []
            if(url){
                fileList.push({
                    uid:'1',
                    status:'done',
                    name:'avatar.png',
                    url:url
                })
            }
            return fileList;
        }
    },
    methods:{
        // 重写a-upload的文件上传处理方式
        downloadFilesCustomRequest(data){
            this.loading = true;
            this.$confirm({
                title: '提示',
                content: '确定要上传人员照片？',
                okText: '确定',
                cancelText: '取消',
                onOk: () => {
                    this.saveFile(data)
                },
                onCancel:()=>{
                    this.loading = false;
                }
            });
            
        },
        // 上传并保存文件
        async saveFile(data){
            try{
                const formData = new FormData()  
                formData.append('file', data.file)
                let res = null;
                let type = this.type;
                if(type=='labour'){
                    if(this.id){
                        res = await updateFace(this.id,formData);
                    }else{
                        res = await checkFace(formData);
                    }
                }else{
                    if(this.id){
                        res = await updatePicture(this.id,formData);
                    }else{
                        res = await uploadDetectFile(formData);
                    }
                }
                let {data:imgUrl,code,msg} = res;
                if(code==200){
                    this.$emit('upload',imgUrl)
                }else{
                    this.$message.error(msg);
                }
            }finally{
                this.loading = false;
            }
        },
        //删除文件
        async removeFile(){
            this.$emit('delete')
        },
        handleCancel(){
            this.previewVisible = false;
        },
        async handlePreview(file){
            this.previewImage = file.url;
            this.previewVisible = true;
        },
    }
}
</script>
<style lang="scss" scoped>
.tip{
    margin: 0;
    line-height: 0;
    font-size: 12px;
    color: #999;
}
</style>
